<template>
  <scroll-view>
    <div :style="bottomStaySpace()" class="wrap">
      <up-navbar
        placeholder
        title="新增持有主体"
        @leftClick="backFn"
      />
      <div class="step">
        <up-steps active-color="#1890FF" current="1" inactive-color="#DEDFE2">
          <up-steps-item title="营业执照" />
          <up-steps-item title="银行证明材料" />
          <up-steps-item>
            <template #desc>
              <div class="step_title">门店门头照片</div>
            </template>
          </up-steps-item>
          <up-steps-item>
            <template #desc>
              <div class="step_title">审核状态</div>
            </template>
          </up-steps-item>
        </up-steps>
      </div>
      <div class="box_info bank_prove_materials">
        <div class="box_title">上传证明材料</div>
        <div class="tip">请根据企业银行开户情况选择上传类型</div>
        <div :class="['select_box', 'flex_sb_start', form.hasBankAccount ? 'active' : '']" @tap="selectBankAccountFn(true)">
          <Image height="98rpx" name="deposit_account_ok" oss type="png" width="112rpx" />
          <div class="flex1 ml20">
            <div :class="['box_title', 'letter_spac', form.hasBankAccount ? 'active1' : '']">已开立企业基本存款账户</div>
            <div class="tip letter_spac">上传基本存款账户信息图片</div>
          </div>
          <div v-if="form.hasBankAccount" class="confirm_icon">
            <Icon height="34rpx" name="icon-queren" width="36rpx" />
          </div>
        </div>
        <div
          v-if="form.enterpriseType === '个体工商户' || form.enterpriseType?.includes('普通个体户') || form.enterpriseType === '个人独资企业'"
          :class="['select_box', 'flex_sb_start', form.hasBankAccount ? '' : 'active']"
          @tap="selectBankAccountFn(false)"
        >
          <Image height="98rpx" name="deposit_account_not" oss type="png" width="112rpx" />
          <div class="flex1 ml20">
            <div :class="['box_title', 'letter_spac', form.hasBankAccount ? '' : 'active1']">未开立企业基本存款账户</div>
            <div class="tip letter_spac">上传开户信息情况说明</div>
          </div>
          <div v-if="!form.hasBankAccount" class="confirm_icon">
            <Icon height="34rpx" name="icon-queren" width="36rpx" />
          </div>
        </div>
      </div>
      <div class="box_info">
        <div class="box_title" style="display: flex"><div class="require">*</div>{{ form.hasBankAccount ? '上传基本存款账户图片' : '上传开户信息情况说明' }}</div>
        <div class="tip">{{ form.hasBankAccount ? '请查看样板，拍摄并上传企业基本存款账户图片' : '请下载并打印说明模板，填写信息、拍照并上传图片' }}</div>
        <div class="tip flex_start mt10">
          <span v-if="!form.hasBankAccount" class="flex_sb_cen base_color" style="width: 134rpx;margin-right: 28rpx" @tap="downloadTemplateFn">
            <Icon name="icon-xiazaidaoru" size="30rpx" />
            <span>下载模板</span>
          </span>
          <span class="flex_sb_cen base_color" style="width: 134rpx;margin-right: 28rpx" @tap="basicDepositAccountInfoRef.change()">
            <Icon name="icon-chakan-2" size="30rpx" />
            <span>查看样板</span>
          </span>
        </div>
        <div style="margin-top: 28rpx;">
          <Upload :default-file="form.certificationPic" limit-count="3" limit-size="10" multiple update @file="form.certificationPic = $event" />
        </div>
        <div class="tip">仅支持jpg、jpeg、png格式，且只能上传3个文件，每个文件小于10MB。</div>
      </div>
      <div class="box_info">
        <LabelAndValue :box-style="labelValueStyle" colon label="收款方" label-width="170" required>
          <Input
            v-model:value="form.payee"
            :styles="{color: 'rgba(0,0,0,.45)'}"
            disabled
            placeholder="请输入收款方名称"
          />
        </LabelAndValue>
        <LabelAndValue :box-style="labelValueStyle" colon label="开户行" label-width="170" required>
          <Input v-model:value="form.openBank" placeholder="请输入开户行" />
        </LabelAndValue>
        <LabelAndValue :box-style="labelValueStyle" colon label="银行预留手机号" label-width="260" required>
          <Input v-model:value="form.reservedMobile" maxlength="11" placeholder="请输入银行预留手机号" type="number" />
        </LabelAndValue>
        <LabelAndValue :box-style="labelValueStyle" colon label="银行账号" label-width="200" required>
          <Input v-model:value="form.bankAccount" placeholder="请输入银行账号" />
        </LabelAndValue>
      </div>
      <template v-if="isUpdateBankCertificateMaterial">
        <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
          <Button :disabled="!canSubmit" size="L" @confirm="saveFn">保存</Button>
        </div>
      </template>
      <template v-else>
        <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
          <Button :disabled="!canSubmit" size="L" @confirm="nextStepFn">下一步</Button>
        </div>
      </template>
    </div>
    <!-- 基本存款账户信息模板预览 -->
    <Popup ref="basicDepositAccountInfoRef" mask>
      <div class="account_temp">
        <Image
          :name="form.hasBankAccount ? 'document_doc/opened_temp' : 'document_doc/not_opened_temp'"
          :type="form.hasBankAccount ? 'png' : 'jpg'"
          height="830"
          oss
          style="margin: auto"
          width="600"
        />
      </div>
    </Popup>
    <!--  点击左上角返回提示  -->
    <u-popup :close-on-click-overlay="false" :show="showBackTip" bg-color="transparent" mode="center" overlay-opacity="0.25">
      <Pconfirm tip-text="您填写的资料尚未保存，是否退出填写?" tip-title="提示" @cancel="showBackTip = false" @confirm="confirmBackFn" />
    </u-popup>
  </scroll-view>
</template>
<script lang="ts" setup>

import {
  bottomStaySpace,
  checkBankAccountFn,
  checkPhoneFn,
  keepBottomSafeDis,
  onLoad,
  Router,
} from '@U/common'
import Image from '@C/Image.vue'
import Icon from '@C/Icon.vue'
import { computed, reactive, ref } from 'vue'
import Upload from '@C/Upload.vue'
import Button from '@C/Button.vue'
import {
  getExternalEnterprisesInfo,
  modifyBankCertificateMaterial,
  updateThirdEnterpriseSecondStep,
} from '@P_GL/holdMainBody/request'
import Input from '@C/Input.vue'
import LabelAndValue from '@C/LabelAndValue.vue'
import { Msg } from '@C/Msg'
import Popup from '@C/Popup.vue'
import Pconfirm from '@C/Pconfirm.vue'
import type { IObj } from '@/interface'

// 组件样式
const labelValueStyle = { borderBottom: '1rpx solid rgba(0,0,0,0.1)', height: '86rpx', minHeight: '86rpx', marginTop: '40rpx', paddingRight: 0 }
const form = reactive({
  id: '',
  name: '',
  legalPersonName: '',
  enterpriseType: '',
  reservedMobile: '',
  hasBankAccount: true,
  certificationPic: [],
  payee: '',
  openBank: '',
  bankAccount: '',
})
const basicDepositAccountInfoRef = ref()
const selectBankAccountFn = (bankAccountStatus: boolean) => {
  form.hasBankAccount = bankAccountStatus
  commonFn()
}
// 获取外部其他企业信息
const getExternalEnterprisesInfoFn = async (id: string) => {
  const res = await getExternalEnterprisesInfo({ id }).finally(() => {})
  if (res?.code === 200) {
    // 是否已开立企业基本存款账户为null时，默认为已开立
    if (res.data.hasBankAccount === null) res.data.hasBankAccount = true
    for (const key in form) {
      form[key] = res.data[key]
    }
    commonFn()
  }
}
// 是否开立基本存款账户公共方法
const commonFn = () => {
  // 已开立账户
  if (form.hasBankAccount) form.payee = form.name
  else form.payee = form.legalPersonName // 未开立账户 注: 只有个体工商户类型，才会出现未开立账户
}
const downloadTemplateFn = () => {
  uni.downloadFile({
    url: `${import.meta.env.VITE_SHOUDAO_OSS_URL}/document_doc/basic_deposit_account_info_temp.docx`,
    success(res) {
      wx.shareFileMessage({
        filePath: res.tempFilePath,
        fileName: '基本存款账户信息.docx',
        success() {
        },
        fail(error: IObj) {
          console.log('error', error)
        },
      })
    },
  })
}
const isUpdateBankCertificateMaterial = ref(false)
onLoad((option: any) => {
  if (option.id) {
    if (option.isUpdateBankCertificateMaterial) isUpdateBankCertificateMaterial.value = JSON.parse(option.isUpdateBankCertificateMaterial)
    getExternalEnterprisesInfoFn(option.id)
  }
})
// const openBankFn = () => {
//   Router.push('bank_list')
//   uni.$once('setBankInfoFn', (bankInfo: any) => {
//     form.openBank = bankInfo?.bankName
//     form.openBankCode = bankInfo?.bankCode
//   })
// }
const canSubmit = computed(() => form?.certificationPic?.length > 0
    && form.payee
    && form.openBank
    && form.reservedMobile
    && form.bankAccount)
const nextStepFn = async () => {
  if (!canSubmit.value) return
  if (!checkPhoneFn(form.reservedMobile)) return Msg({ msg: '银行预留手机号格式不正确' })
  if (!checkBankAccountFn(form.bankAccount)) return Msg({ msg: '银行账号格式不正确' })
  const res = await updateThirdEnterpriseSecondStep(form).finally(() => {})
  if (res?.code === 200) {
    Router.push('new_add_store', { id: form.id })
  }
}
const showBackTip = ref(false)
const backFn = () => {
  showBackTip.value = true
}
const confirmBackFn = () => {
  showBackTip.value = false
  Router.back()
}
const saveFn = async () => {
  if (!canSubmit.value) return
  if (!checkPhoneFn(form.reservedMobile)) return Msg({ msg: '银行预留手机号格式不正确' })
  if (!checkBankAccountFn(form.bankAccount)) return Msg({ msg: '银行账号格式不正确' })
  const res = await modifyBankCertificateMaterial(form).finally(() => {})
  if (res?.code === 200) Router.back()
}
</script>

<style lang="less" scoped>
.wrap {
  /deep/ .u-steps {
    display: flex;
  }
  .step {
    padding: 28rpx 0;
    margin-top: 2rpx;
    background-color: #fff;
    .step_title {
      font-size: 24rpx;
      line-height: 20px;
      color: #DEDFE2;
    }
    /deep/ .u-steps-item__wrapper__circle {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
    }
    /deep/ .u-steps-item__wrapper--row {
      width: auto;
    }
    /deep/ .u-text__value {
      font-size: 24rpx !important;
    }
    /deep/ .u-text__value--main {
      color: #1890FF;
    }
  }
  .box_info {
    background: #FFFFFF;
    padding: 20rpx 40rpx 45rpx;
    margin-top: 20rpx;
    .box_title {
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(0,0,0,0.85);
      line-height: 44rpx;
    }
    .tip {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
  .bank_prove_materials {
    .letter_spac {
      letter-spacing: 3rpx;
    }
    .select_box {
      position: relative;
      width: 668rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      border: 4rpx solid #D5D6D7;
      padding: 28rpx 20rpx 24rpx 50rpx;
      margin-top: 30rpx;
      .confirm_icon {
        position: absolute;
        top: -2rpx;
        right: -2rpx;
      }
    }
    .active {
      border-color: #1890FF;
    }
    .active1 {
      color: #1890FF;
    }
  }
}
.require {
  color: red;
}
</style>
